<template>
  <div class="recomment-nav">
    <div class="nav-wrapper">
      <div class="nav-item">
        <img src="./../assets/static/temp/c3.png"/>
        <span>环球美食</span>
      </div>
      <div class="nav-item">
        <img src="../assets/static/temp/c5.png"/>
        <span>个护美妆</span>
      </div>
      <div class="nav-item">
        <img src="../assets/static/temp/c6.png"/>
        <span>营养保健</span>
      </div>
      <div class="nav-item">
        <img src="../assets/static/temp/c7.png"/>
        <span>家居厨卫</span>
      </div>
      <div class="nav-item">
        <img src="../assets/static/temp/c8.png"/>
        <span>速食生鲜</span>
      </div>
    </div>
    <div class="show-img">
      <img src="../assets/static/temp/ad1.jpg" alt="">
    </div>
  </div>
</template>

<script>
/**
* descripe:首页导航
* date: 2019-
* author: yezhanxiang
*/
  export default {
    data () {
      return {

      }
    },
    components: {

    },
    watch: {

    },
    created () {

    },
    methods: {

    }
  }
</script >

<style lang='stylus' scoped>
.recomment-nav
  background-color #fff
  .nav-wrapper
    display flex
    padding 0.3rem 0.2rem
    .nav-item
      flex 1
      height 1.4rem
      display flex
      flex-direction column
      align-items center
      img 
        height 0.8rem
        width 0.8rem
      span 
        margin-top 0.1rem
  .show-img
    width 100%
    text-align center
    img 
      width 95%
</style>
